<template>
	<div>
		<!-- 头部搜索区域 -->
		<div class="header-search">
			<div>
				<Input class="input" v-model="nameSearch" placeholder="用户姓名" clearable />
				<Input class="input" v-model="mobileSearch" placeholder="用户手机号" clearable />
				<Button type="primary" icon="ios-search" @click="search">搜索</Button>
			</div>
		</div>
		<br /><br />
		<!-- 监理师申请列表 -->
		<Table border :columns="columns1" :data="applyList"></Table>
		<!-- 分页 -->
		<br /><br />
		<div style="text-align: center;">
			<Page :total="total" show-elevator @on-change="changePage" />
		</div>
		<Modal
        v-model="modal1"
        title="联系申请人"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>您确定要更新当前申请人的状态吗？</p>
    </Modal>
	</div>
</template>

<script>
	import path from '@/api/path.js';
	let url = path.url;
	import axios from '@/libs/api.request';
	export default {
		data() {
			return {
				nameSearch: '',
				mobileSearch: '',
				total: 0,
				page: 1,
				modal1: false,
				columns1: [{
						title: '编号',
						key: 'id',
						align: 'center'
					},
					{
						title: '申请人',
						key: 'name',
						align: 'center'
					},
					{
						title: '手机号',
						key: 'mobile',
						align: 'center'
					},
					{
						title: '提交时间',
						key: 'createTime',
						align: 'center'
					},
					{
						title: '小区地址',
						key: 'address',
						align: 'center'
					},
					{
						title: '监理师',
						key: 'supervisionName',
						align: 'center'
					},
					{
						title: '状态',
						key: 'status',
						align: 'center'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'warning',
										size: 'large'
									},
									style: {
										margin: '3px 0'
									},
									on: {
										click: (e) => {
											this.showModal(params.row.id, params.row.status);
										}
									}
								}, '已联系/未联系')
							]);
						}
					}
				],
				applyList: [],
				contactId: 0,
				status: 0
			}
		},
		methods: {
			search() {
				this.getApplyList();
			},
			// 分页
			changePage(idx) {
				this.page = idx;
				this.getApplyList();
			},
			// 获取监理师申请列表
			getApplyList() {
				axios.request({
					url: `${url}SupervisionApply/getSupervisionApplyList`,
					method: 'post',
					data: {
						name: this.nameSearch,
						mobile: this.mobileSearch,
						page: this.page
					}
				}).then(res => {
					if (res.data.status == 1) {
						this.total = res.data.content.total;
						this.applyList = res.data.content.data;
						this.applyList.forEach(item => {
							item.status == 1 ? item.status = '未联系' : item.status = '已联系';
						})
					} else {
						throw res.data.msg;
					}
				})
			},
			showModal(id,status){
				this.modal1 = true;
				this.contactId = id;
				status == '未联系' ? status = 2 : status = 1 ; 
				this.status = status;
			},
			ok () {
                axios.request({
					url: `${url}SupervisionApply/editSupervisionApply`,
					method: 'post',
					data: {
						id: this.contactId,
						status: this.status
					}
				}).then(res=>{
					if ( res.data.status == 1 ) {
						this.getApplyList();
					} else {
						throw res.data.msg;
					}
				})
            },
            cancel () {
                this.$Message.info('您取消了申请人状态更新！');
            }
		},
		created() {
			this.getApplyList();
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.header-search {
		display: flex;
		justify-content: space-between;

		.input {
			width: 200px;
			margin-right: 20px;
		}
	}
</style>
